body{
    display: flex;
}
.login-container{
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.login-container .logo{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fbc701;
    height: 16vw;
}
.login-container .logo img{
    width: 13vw;
    height: 13vw;
    margin-right: 6vw;
}

.login-container .logo h1{
    font-weight: 400;
    font-size: 7vw;
    color: #ffffff;
    font-family: 宋体;
    box-sizing: border-box;
    padding-left: 2vw;
}
.login-container .logo h4{
    font-size: 3vw;
    color: #ffffff;
}
.login-container .login-form{
    width: 90%;
    margin: 0 auto;
    height:40vw ;
}
.login-container .login-form .tab-container {
    flex: 1;
    padding: 6vw;
    border: none;
    cursor: pointer;
    font-size: 6vw;
    background-color: transparent;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.login-container .login-form .tab-container h3{
  font-weight: 400;
    font-size: 5vw;
}

.form{
    width: 96%;
    margin: 1vw auto;
}
.form li{
    display: flex;
    align-items: center;
    margin-bottom: 3vw;
    color: #777777;
}
.form li input{
    border: none;
    outline: none;
    padding-bottom: 1vw;
    border-bottom: #f4f4f4 1px solid;
    width: 62vw;
}
.agreement {
    margin-top: 10vw;
    width: 100%;
    font-size: 3.5vw;
}
.agreement input[type="checkbox"] {
    display: none; /* 隐藏默认复选框 */
}
.agreement input[type="checkbox"] + label:before {
    content: "";
    display: inline-block;
    width: 4vw;
    height: 4vw;
    border-radius: 50%; /* 设置圆角 */
    border: 2px solid #f4f4f4; /* 设置边框颜色 */
    vertical-align: middle;
   margin-right: 2vw;
    background-color: white;
    cursor: pointer;
}
.agreement input[type="checkbox"]:checked + label:before {
    background-color: #ff6600; /* 设置选中时的背景颜色 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M10 15.172l7.071-7.071 1.414 1.414-8.485 8.485-5.657-5.657 1.414-1.414z"/></svg>');
    background-size: 2.5vw;
    background-position: center;
    background-repeat: no-repeat;
}
.agreement a {
    color: #007aff;
    text-decoration: none;
    margin: 0 2px;
}
.button-login{
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-login button{
    background-color: #f8d714;
    border-radius: 16px  ;
    width: 80%;
    height: 10vw;
    font-size: 4vw;
    font-weight: 600;
    margin-top: 3vw;
}
.button-register {
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-register button{
    margin-top: 1vw;
    background-color: #f4f4f4;
    border-radius: 16px  ;
    width: 80%;
    height: 10vw;
    font-size: 4vw;
    font-weight: 600;
}
.links{
    margin-top: 2vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 3vw;
    color: #f4f4f4;
}
.other-login{
    display: flex;
    width: 40%;
    margin: 22vw auto;
    align-items: center;
    justify-content: space-between;
}
.other-login button{
    border: none;
    background-color: #fff;
}
.other-login img{
    border-radius: 50%;
    width: 9vw;
    height:9vw;
    padding: 1vw;
    border: #f4f4f4 1px solid;
}